<template>
  <el-badge
    :hidden="unRead === 0"
    :value="unRead"
    :max="99"
    :offset="[-285, 17]"
  >
    <div
      class="m-1 mb-0 rounded-[5px] cursor-pointer p-1 hover:bg-blue-100 select-none w-[288px] overflow-x-auto"
      :class="[
        selected ? 'conversation-selected' : '',
        top === 0 ? '' : 'bg-yellow-100'
      ]"
      @click="emit('onClick', props.id)"
      @contextmenu="handleRightClick"
    >
      <div class="flex items-center">
        <el-avatar :size="48" shape="square" :src="props.avatar" />
        <div class="ml-4 flex flex-col flex-grow">
          <div class="flex justify-between">
            <el-text
              truncated
              class="w-[150px] font-bold !self-baseline justify-start"
              >{{ props.name }}</el-text
            >
            <el-text class="!self-baseline justify-end" type="info">
              {{ getMsgShowTime(props.latestMsg) }}
            </el-text>
          </div>
          <div class="mt-2">
            <el-text truncated class="w-[200px]">{{
              getMsgShowContent(props.latestMsg)
            }}</el-text>
          </div>
        </div>
      </div>
    </div>
  </el-badge>
</template>

<script setup lang="ts">
import '@imengyu/vue3-context-menu/lib/vue3-context-menu.css'
import ContextMenu from '@imengyu/vue3-context-menu'

import { Msg, MsgType, TextBody } from './types'
import { h } from 'vue'
import { IconifyIconOnline } from '@/components/ReIcon'
const emit = defineEmits<{
  onClick: [number]
  remove: [number]
  top: [number, boolean]
}>()

const handleRightClick = (e: MouseEvent) => {
  e.preventDefault()

  ContextMenu.showContextMenu({
    x: e.x,
    y: e.y,
    items: [
      {
        label: h(
          'span',
          { class: 'text-blue-500 text-[14px]' },
          props.top !== 0 ? '取消置顶' : '置顶'
        ),
        icon: h(IconifyIconOnline, {
          icon: props.top !== 0 ? 'mdi:pin-off' : 'mdi:pin',
          class: 'text-blue-500'
        }),
        onClick: () => {
          emit('top', props.id, props.top === 0)
        }
      },
      {
        label: h('span', { class: 'text-red-500 text-[14px]' }, '移除'),
        icon: h(IconifyIconOnline, {
          icon: 'mdi:delete',
          class: 'text-red-500'
        }),
        onClick: () => {
          emit('remove', props.id)
        }
      }
    ]
  })
}

const props = defineProps<{
  selected?: boolean
  id: number
  name: string
  avatar: string
  latestMsg?: Msg<any>
  unRead?: number
  top: number
}>()

function getMsgShowContent(msg: Msg<any>) {
  if (!msg) return ''
  switch (msg.type) {
    case MsgType.Text:
      return (msg.body as TextBody).content
    case MsgType.File:
      return '[文件]'
    case MsgType.Image:
      return '[图片]'
    case MsgType.Video:
      return '[视频]'
    case MsgType.Audio:
      return '[音频]'
    case MsgType.System:
      return '[系统消息]'
    default:
      return '[未知消息类型]'
  }
}

function getMsgShowTime(msg: Msg<any>) {
  if (!msg) return ''
  // 当日的显示 时:分
  // 昨天的显示 昨天
  // 前天的显示 前天
  // 今年的显示 月-日
  // 去年的显示 年-月-日
  const date = new Date(msg.createdAt)
  const now = new Date()
  // 当日的显示 时:分
  if (
    date.getFullYear() === now.getFullYear() &&
    date.getMonth() === now.getMonth() &&
    date.getDate() === now.getDate()
  ) {
    // hh:mm
    // return `${date.getHours()}:${date.getMinutes()}`
    return `${date.getHours().toString().padStart(2, '0')}:${date
      .getMinutes()
      .toString()
      .padStart(2, '0')}`
  }
  // 昨天的显示 昨天
  if (
    date.getFullYear() === now.getFullYear() &&
    date.getMonth() === now.getMonth() &&
    date.getDate() === now.getDate() - 1
  ) {
    return '昨天'
  }
  // 前天的显示 前天
  if (
    date.getFullYear() === now.getFullYear() &&
    date.getMonth() === now.getMonth() &&
    date.getDate() === now.getDate() - 2
  ) {
    return '前天'
  }
  // 今年的显示 月-日
  if (date.getFullYear() === now.getFullYear()) {
    // MM-dd
    return `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date
      .getDate()
      .toString()
      .padStart(2, '0')}`
  }
}
</script>
<style>
.el-popover.ppp {
  padding: 4px;
  min-width: 5px;
  display: inline-flex;
}
</style>

<style scoped lang="scss">
.conversation-selected {
  background-color: #e1e8fd;
  border: 1px solid #93c5fd;
}
</style>
